import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { MenuItem } from '@iux/live';

@Component({
  templateUrl: './custom.component.html',
  styles: [
    `
      .customer-menu-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .customer-menu-title span {
        display: block;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomComponent implements OnInit {
  menus: MenuItem[];

  @ViewChild('menuItem2', { static: true }) menuItem2: TemplateRef<any>;
  @ViewChild('menuItem4', { static: true }) menuItem4: TemplateRef<any>;

  ngOnInit() {
    this.menus = [
      {
        id: '1',
        label: 'Menu 01',
        icon: 'icon-menu-home',
        items: [
          { id: '11', label: 'Item 1' },
          { id: '12', label: 'Item 2' },
          { id: '13', label: 'Item 3' },
          { id: '14', label: 'Item 4' },
        ],
      },
      {
        id: '2',
        label: this.menuItem2,
        icon: 'icon-menu-host',
      },
      {
        id: '3',
        label: 'Menu 03',
        icon: 'icon-menu-alarm',
        items: [
          {
            id: '31',
            label: 'Item 7',
          },
          {
            id: '32',
            label: 'Item 8',
          },
        ],
      },
      {
        id: '4',
        label: this.menuItem4,
        icon: 'icon-menu-share',
        items: [
          {
            id: '41',
            label: 'Item 9',
          },
          {
            id: '42',
            label: 'Item 10',
          },
        ],
      },
    ];
  }
}
